<template>
  <div class="section">
    <h2 class="section_title">
      <img :key="icon" v-lazy="joinURL(settings.backend_upload, icon)" alt="icon" class="section_icon" />
      {{ unserialize(title, false) }}
    </h2>
    <div class="custom_layout">
      <div v-for="(item, index) in items" :key="index" class="grid_item" :class="{
        'full_width': type === 6 || (type == 4 && index === 0),
        'half_width': (type === 3) || (type == 4 && index !== 0),
        'one_per_row': type === 6,
        'two_per_row': type === 3 || (type === 4 && index !== 0),
      }" :style="{ backgroundImage: `url(${getBackground(index)})` }" @click="onPlayGame(item)">
        <div class="grid_item_left">
          <img v-lazy="joinURL(settings.backend_upload, item.logo_h5)" :key="item.logo_h5" alt="item_image"
            class="item_image" />
          <p class="item_label">{{ unserialize(item.name, false) }}</p>
        </div>
        <div class="grid_item_right">
          <img
            :key="type === 6 ? (index < 3 ? `/imgs/home/dynamic_cp_logo${index}.png` : '/imgs/home/dynamic_cp_logo0.png') : joinURL(settings.backend_upload, (type === 3 || type === 4) ? item.picture_h5_second : item.picture_h5)"
            v-lazy="type === 6 ? (index < 3 ? `/imgs/home/dynamic_cp_logo${index}.png` : '/imgs/home/dynamic_cp_logo0.png') : joinURL(settings.backend_upload, (type === 3 || type === 4) ? item.picture_h5_second : item.picture_h5)"
            alt="" :class="{
              caipiaolog: type === 6,
              tiyulog: type === 4,
              shixunlog: type === 3,
            }" />
        </div>
        <!--  && item.has_next == 0 -->
        <iconpark-icon v-if="isLocalLoggedIn" class="fav"
          :name="allCollected.includes(item.id) ? 'shoucang-sel' : 'shoucang-def'" size="1rem"
          @click.stop="reqCollect(item, allCollected)"></iconpark-icon>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from "vue";
import { storeToRefs } from 'pinia';
import { Page } from '@/store/page';
import { User } from '@/store/user';
import pinia from '@/store';
const { allCollected, isLocalLoggedIn } = storeToRefs(User(pinia));
const { settings } = storeToRefs(Page(pinia));
import { unserialize, onPlayGame } from '@/utils/useStoreMethods';
import { reqCollect } from '@/utils/useNetMethods';
import { joinURL } from '@/utils/publicMethods'


const props: any = defineProps({
  type: Number,
  title: [String, Object],
  icon: String,
  items: Array as () => { logo_h5: string; name: string, picture_h5: string, id: string, has_next: number, picture_h5_second: string }[],
});


const backgroundPatterns = ref([
  "/imgs/home/dynamic_sx1.png",
  "/imgs/home/dynamic_sx2.png",
  "/imgs/home/dynamic_sx1.png",
  "/imgs/home/dynamic_sx2.png",
]);
const backgroundPatterns1 = ref([
  "/imgs/home/dynamic_ty1.png",
  "/imgs/home/dynamic_ty2.png",
  "/imgs/home/dynamic_ty3.png",
  "/imgs/home/dynamic_ty4.png",
  "/imgs/home/dynamic_ty5.png",
]);
const backgroundPatterns2 = ref([
  "/imgs/home/dynamic_cp1.png",
  "/imgs/home/dynamic_cp2.png",
  "/imgs/home/dynamic_cp3.png",
]);

const selectedType = ref(props.type);

// 每次 type 变化时重新计算背景图
watch(() => props.type, (newType) => {
  selectedType.value = newType;  // 更新 selectedType
});

const selectedBackgroundPatterns = computed(() => {
  switch (selectedType.value) {
    case 3:
      return backgroundPatterns.value;
    case 4:
      return backgroundPatterns1.value;
    case 6:
      return backgroundPatterns2.value;
    default:
      return backgroundPatterns.value;
  }
});

// 获取背景图
const getBackground = (index: number) => {
  const patterns = selectedBackgroundPatterns.value;
  return patterns[index % patterns.length];
};
</script>

<style lang="scss" scoped>
.section {
  width: 347px;
  margin: 0 auto 24px;

  .section_title {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 13px;
    color: #fcfffa;

    .section_icon {
      width: 18px;
      height: 18px;
      margin-right: 5px;
    }
  }

  .custom_layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;

    .grid_item {
      height: 94px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 0 12px 12px;
      border-radius: 8px;
      background-repeat: no-repeat;
      background-size: cover;
      text-align: center;
      position: relative;

      .grid_item_left {
        width: 60px;

        .item_image {
          // width: 27px;
          height: 27px;
          margin: 0 auto;
          display: block;
        }

        .item_label {
          margin-top: 8px;
          font-size: 14px;
          text-align: center;
          color: #fff;
        }
      }

      .grid_item_right {
        height: 94px;
        position: relative;
        flex: 1;

        img {
          position: absolute;
          right: 4px;
          bottom: 0px;
        }
        .caipiaolog {
          width: 134px;
          height: 94px;
          margin-right: 25px;
        }

        .tiyulog {
          height: 90px;
        }

        .shixunlog {
          height: 90px;
        }
      }
    }

    /* 占整行 */
    .full_width {
      grid-column: span 2;
    }

    /* 一条数据一行 */
    .one_per_row {
      grid-column: span 2;
    }

    /* 两条数据一行 */
    .two_per_row {
      grid-column: span 1;
    }

    /* 第一条占整行，其余两条占一行 */
    .half_width {
      grid-column: span 1;
    }

    .fav {
      position: absolute;
      top: 5px;
      right: 5px;
    }
  }
}
</style>
